<template>
	<view>
		<view class="recordBot">
			<template v-if="!loadFlag">
				<view class="loading">
					<loading></loading>
				</view>
			</template>
			<template v-else>
				<view class="recordTj">共学{{recField.totalNum}}个知识点,完成{{recField.finishNum}}个未完成{{recField.noFinishNum}}个,完成率{{recField.comRate}}</view>
			</template>
			<view class="recordSta">
				<view class="staItem hasFlex">
					<view class="cir comp"></view>
					<view>已完成</view>
				</view>
				<view class="staItem hasFlex">
					<view class="cir noComp"></view>
					<view>未完成</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			recField:Object,
			loadFlag:Boolean
		}
	}
</script>

<style lang="scss" scoped>
	.recordBot{
		@include respTo(phone){
			height: 120rpx;
		}
		@include respTo(pad){
			height: 60rpx;
		}
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius:0 0 15rpx 15rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		box-shadow: 0 -5rpx 8rpx rgba(0,0,0,.02);
		color: $pss-text-color8;
		.loading{
			@include respTo(phone){
				height: 120rpx;
			}
			@include respTo(pad){
				height: 60rpx;
			}
			width: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.recordTj{
			flex: 1;
			display: flex;
			align-items: center;
			@include respTo(phone){
				font-size: $font-size32;
			}
			@include respTo(pad){
				font-size: $padSize16;
			}
		}
		.recordSta{
			@include respTo(phone){
				width:140rpx;
				font-size: $font-size30;
			}
			@include respTo(pad){
				width:100rpx;
				font-size: $padSize14;
			}
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			.staItem{
				align-items: center; 
				@include respTo(phone){
					margin-bottom: 10rpx;
				}
				@include respTo(pad){
					margin-bottom: 2rpx;
				}
			}
			.cir{
				@include respTo(phone){
					width: 20rpx;
					height: 20rpx;
				}
				@include respTo(pad){
					width: 11rpx;
					height: 11rpx;
				}
				border-radius: 50%;
				margin-right: 5rpx;
				opacity: .8;
				&.comp{
					background: $pss-color-green;
				}
				&.noComp{
					background:$pss-color-red;
				}
			}
		}
	}
</style>